<template>
  <div class="bw-views-appset-left">
    <template v-for="item in data.listMenu" :key="item">
      <div
        :class="[
          'div-item',
          item.key === data.subMenuKey ? 'div-select' : '',
          item.disable ? 'div-not-allowed' : '',
        ]"
        @click="toPage(item)"
      >
        <Icon :icon="'ant-design:' + item.icon" class="div-icon" />
        <span>{{ item.text }}</span>
      </div>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { useTool } from './util'

/** 导出Tool帮助类 */
const { data, toPage } = useTool()
</script>

<style scoped lang="less">
.bw-views-appset-left {
  padding: 16px;
  height: calc(100% - 32px);

  .div-item {
    color: #171a1d;
    font-weight: 500;
    height: 32px;
    line-height: 32px;
    padding: 0 16px;
    border-radius: 3px;
    cursor: pointer;

    .div-icon {
      font-size: 18px;
      margin-right: 16px;
    }
  }

  .div-item:hover {
    cursor: pointer;
    background: #f4f4f5;
  }

  .div-select {
    color: #0960bd;
    background: #e5e6e8;
  }

  .div-not-allowed {
    cursor: not-allowed;
    color: rgba(0, 0, 0, 0.25);
  }
}
</style>
